<template>
    <!--<div>-->
        <!--<div>-->
            <!--<p>-->
                <!--&lt;!&ndash; 使用 router-link 组件来导航. &ndash;&gt;-->
                <!--&lt;!&ndash; 通过传入 `to` 属性指定链接. &ndash;&gt;-->
                <!--&lt;!&ndash; <router-link> 默认会被渲染成一个 `<a>` 标签 &ndash;&gt;-->
                <!--<router-link to="/home">home</router-link>-->
                <!--<router-link to="/about">about</router-link>-->
                <!--<router-link to="/contact">contact</router-link>-->
            <!--</p>-->
            <!--&lt;!&ndash; 路由出口 &ndash;&gt;-->
            <!--&lt;!&ndash; 路由匹配到的组件将渲染在这里 &ndash;&gt;-->
            <!--<router-view></router-view>-->
        <!--</div>-->
    <!--</div>-->
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px"><ElAside></ElAside></el-aside>
            <el-container>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
        <el-footer>Footer</el-footer>
    </el-container>
</template>

<script lang="ts">
    import {Vue,Component,Inject, Provide, Prop, Model, Watch, Emit, Mixins } from 'vue-property-decorator'
    import ElAside from './ElAside.vue'

    @Component({
        components:{ElAside}
    })
    export default class App extends Vue {
        // 初始化数据
        msg = 123

    }
</script>
<style scoped lang="scss">
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        height: auto;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        height: 600px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    /*.el-container:nth-child(5) .el-aside,*/
    /*.el-container:nth-child(6) .el-aside {*/
        /*line-height: 260px;*/
    /*}*/

    /*.el-container:nth-child(7) .el-aside {*/
        /*line-height: 320px;*/
    /*}*/
</style>